<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝宝生日快乐！</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="modal.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap">
</head>
<body>
    <!-- 音乐控制 - 右上角 -->
    <div class="music-control">
        <div id="musicToggle" class="music-icon">
            <span>🎵</span>
        </div>
        <audio id="birthdaySong" loop>
            <source src="https://m701.music.126.net/20250716152746/8f51c7a05b59d057bc5db62fd988610d/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/34270630838/206a/0ffc/15b5/adeb8a72ce3130f6f1726c388595c17e.mp3?vuutv=7Rcvy/XAA967rMMb/PUxoaCeoUY8hAoMBxRxYxRkOnuIesApW66P7otOOLKMnhdl5tQtieTtJJ+5SUaXyZuQ8GjBaVp0foj2HvNmc9EWxI4=" type="audio/mpeg">
            您的浏览器不支持音频元素。
        </audio>
    </div>

    <div class="container">
        <div class="balloons">
            <span class="balloon">🎈</span>
            <span class="balloon">🎈</span>
            <span class="balloon">🎈</span>
            <span class="balloon">🎈</span>
            <span class="balloon">🎈</span>
        </div>
        
        <h1>生日快乐</h1>
        <div class="name">贾佳佳</div>
        <div class="name">我最爱的猪猪</div>
        
        <div class="cake">🎂</div>
        
        <div class="heart">❤️</div>
        
        <div id="typing-text" class="message" data-text="今天是你的特别日子，愿你的生日充满欢笑和幸福，就像你一直以来带给我的那样。" data-speed="80"></div>
        
        <div class="message">
            <p>希望你所有的愿望都能实现！</p>
            <p>我的猪猪，永远爱你！</p>
        </div>
        
        <!-- 更新为实际的生日日期 -->
        <div id="countdown" class="countdown" data-target-date="2023-08-15T00:00:00">
            正在计算...
        </div>
        
        <button id="wish-button" class="btn">点击查看我的祝福</button>
        
        <div class="photo-memories">
            <h2>美好回忆</h2>
        </div>
        
        <!-- 新的照片轮播 -->
        <div class="photo-carousel">
            <div class="carousel-item" data-index="0">
                <img src="687316433b9109cc71a27fe99a34718.jpg" alt="照片1">
            </div>
            <div class="carousel-item" data-index="1">
                <img src="11db0967b3fdc08a111dd67a58a58d3.jpg" alt="照片2">
            </div>
            <div class="carousel-item" data-index="2">
                <img src="8d37649ab103707368354bd7a149504.jpg" alt="照片3">
            </div>
            <div class="carousel-item" data-index="3">
                <img src="278783d38768ae403ff143db6ded3f5.jpg" alt="照片4">
            </div>
        </div>
        
        <!-- 轮播导航点 -->
        <div class="carousel-nav">
            <span class="carousel-dot active" data-index="0"></span>
            <span class="carousel-dot" data-index="1"></span>
            <span class="carousel-dot" data-index="2"></span>
            <span class="carousel-dot" data-index="3"></span>
        </div>
        
        <!-- 隐藏原始图片墙 -->
        <div class="photo-gallery" style="display:none;">
            <div class="gallery-item">
                <img src="687316433b9109cc71a27fe99a34718.jpg" alt="照片1">
            </div>
            <div class="gallery-item">
                <img src="11db0967b3fdc08a111dd67a58a58d3.jpg" alt="照片2">
            </div>
            <div class="gallery-item">
                <img src="8d37649ab103707368354bd7a149504.jpg" alt="照片3">
            </div>
            <div class="gallery-item">
                <img src="278783d38768ae403ff143db6ded3f5.jpg" alt="照片4">
            </div>
        </div>
        
        <!-- 互动元素 -->
        <div class="interactive-elements">
            <span class="interactive-element" style="top: 120px; left: 15%;">💕</span>
            <span class="interactive-element" style="top: 180px; right: 15%;">🌹</span>
            <span class="interactive-element" style="bottom: 150px; left: 20%;">🎁</span>
            <span class="interactive-element" style="bottom: 220px; right: 20%;">✨</span>
        </div>
        
        <div class="wishes">
            <h2>生日愿望</h2>
            <p>愿你天天开心，事事顺心</p>
            <p>愿你梦想成真，前程似锦</p>
            <p>愿你被世界温柔以待，也被我深深爱着</p>
        </div>
        
        <div class="footer">
            <p>特别为我最爱的宝宝制作 ❤️</p>
            <p>点击任意位置会出现爱心哦~</p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html> 